<template>
	<view class="rechargeAmount">
		<u-toast ref="showAmountmsg" />
		<view class="rechargeAmount-import">
			输入金额
			<view class="amountLimit">
				注意：限额99999.99，小数位不超过2位
			</view>
			<view class="rechargeAmount-ipt">
				￥<input v-model="amount" class="rechargeAmount-number" type="text" placeholder="99999.99" />
			</view>

		</view>

		<view class="rechargeAmount-next" @tap="rechargeBtn">
			下一步
		</view>
	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapMutations
	} = createNamespacedHelpers('users');
	export default {
		data() {
			return {
				amount: "",
			}
		},
		methods: {
			...mapMutations(["setBalance"]),
			rechargeBtn() {
				let res = /^([1-9]\d{0,4}|0)([.]?|(\.\d{1,2})?)$/
				if (res.test(this.amount)) {
					uni.switchTab({
						url: '/pages/mine/mine'
					})
					this.setBalance(this.amount)
				} else {
					this.$refs.showAmountmsg.show({
						title: '请输入正确的金额',
						type: 'error'
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.rechargeAmount {
		.amountLimit {
			font-size: 28rpx;
			color: red;
			margin: 20rpx 0rpx;
		}

		.rechargeAmount-import {
			background-color: white;
			border-radius: 10rpx;
			padding: 30rpx 30rpx;
			margin: 30rpx;
			font-size: 34rpx;

			.rechargeAmount-ipt {
				display: flex;
				height: 80rpx;
				margin-top: 20rpx;
				font-size: 40rpx;
				line-height: 80rpx;

				.rechargeAmount-number {
					height: 80rpx;
					font-size: 60rpx;
					margin-left: 10rpx;
				}
			}
		}

		// 下一步
		.rechargeAmount-next {
			margin: 30rpx;
			color: white;
			text-align: center;
			border-radius: 10rpx;
			padding: 24rpx;
			font-size: 30rpx;
			background-color: #ff8038;
		}
	}
</style>
